<template>
  <view class="container">
    <uni-card :is-shadow="false" is-full>
      <text class="uni-h6"
        >uni-forms
        组件一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text
      >
    </uni-card>

    <uni-section title="表单校验" type="line">
      <view class="example">
        <!-- 基础表单校验 -->
        <!-- label-position="top" label-width="auto" 表单标签格式统一换行 -->
        <uni-forms
          ref="valiForm"
          :modelValue="deepCloneForm"
          label-position="top"
          label-width="auto"
        >
          <template v-if="option.column">
            <view v-for="(item, index) in option.column" :key="item.prop">
              <template
                v-if="
                  item.type == 'input' ||
                  item.type == 'password' ||
                  item.type == 'textarea'
                "
              >
                <auni-input
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-input>
                {{ deepCloneForm[item.prop] }}{{ item.prop }}{{ deepCloneForm }}
              </template>
              <template v-else-if="item.type == 'number'">
                <auni-number
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-number>
              </template>
              <template v-else-if="item.type == 'map'">
                <auni-city-picker
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-city-picker>
              </template>
              <template v-else-if="item.type == 'radio'">
                <auni-radio
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-radio>
              </template>
              <template v-else-if="item.type == 'checkbox'">
                <auni-checkbox
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-checkbox>
              </template>
              <template v-else-if="item.type == 'select'">
                <auni-select
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-select>
              </template>
              <template v-else-if="item.type == 'cascader'">
                <auni-cascader
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-cascader>
              </template>
              <template v-else-if="item.type == 'date'">
                <auni-date :option="item" v-model="deepCloneForm[item.prop]"></auni-date>
              </template>
              <template v-else-if="item.type == 'datetime'">
                <auni-datetime
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-datetime>
              </template>
              <template v-else-if="item.type == 'time'">
                <auni-time :option="item" v-model="deepCloneForm[item.prop]"></auni-time>
              </template>
              <template v-else-if="item.type == 'switch'">
                <auni-switch
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-switch>
              </template>
              <template v-else-if="item.type == 'rate'">
                <auni-rate :option="item" v-model="deepCloneForm[item.prop]"></auni-rate>
              </template>
              <template v-else-if="item.type == 'slider'">
                <auni-slider
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-slider>
              </template>
              <template v-else-if="item.type == 'upload'">
                <auni-upload
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-upload>
              </template>
              <template v-else-if="item.type == 'customUpload'">
                <auni-upload-custom
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-upload-custom>
              </template>
              <template v-else-if="item.type == 'customInfo'">
                <auni-info-custom
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-info-custom>
              </template>
              <template v-else-if="item.type == 'dynamic'">
                <auni-dynamic
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-dynamic>
              </template>
              <template v-else-if="item.type == 'customCrud'">
                <auni-crud-custom
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-crud-custom>
              </template>
              <template v-else-if="item.type == 'customGroup'">
                <auni-group-custom
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-group-custom>
              </template>
              <template v-else>
                <auni-undefined
                  :option="item"
                  v-model="deepCloneForm[item.prop]"
                ></auni-undefined>
              </template>
            </view>
          </template>
          <template v-if="option.group">
            <view
              v-for="(groupItem, index) in option.group"
              :key="groupItem.prop"
            >
              <view class="ptb20 size16">{{ groupItem.label }}</view>
              <template v-if="groupItem.column">
                <forms-item :option="groupItem" :form="deepCloneForm"> </forms-item>
              </template>
              <template v-else>
                <view
                  style="
                    font-size: 14px;
                    background: #ffffff;
                    color: #a4a4a4;
                    padding: 6px 20px;
                    text-align: center;
                  "
                  >暂无相关数据</view
                >
              </template>
            </view>
          </template>
          <!-- <template v-else>
            <view
              style="
                font-size: 14px;
                background: #ffffff;
                color: #a4a4a4;
                padding: 6px 20px;
                text-align: center;
              "
              >暂无相关数据</view
            >
          </template> -->
        </uni-forms>
        <button
          type="primary"
          @click="submit('valiForm')"
          class="ptb16 mt60 mb20"
        >
          提交
        </button>
      </view>
    </uni-section>

    
    <uni-section title="表单校验" type="line">
      <view class="example">
        <!-- 基础表单校验 -->
        <uni-forms ref="valiForm" :rules="dynamicRules" :modelValue="deepCloneForm">
          <view v-for="(item, index) in option.column" :key="item.prop">
            <!-- <uni-forms-item :label="item.labei" required :name="item.prop">
              <uni-easyinput
                v-model="deepCloneForm.a166126914632983938"
                placeholder="请输入姓名"
              />
              1{{JSON.stringify(form)}}
              3{{deepCloneForm[item.prop]}}
            </uni-forms-item> -->
            <!-- <template
              v-if="
                item.type == 'input' ||
                item.type == 'password' ||
                item.type == 'textarea'
              "
            >
              <auni-input
                :option="item"
                v-model="deepCloneForm[item.prop]"
              ></auni-input>
              1{{ deepCloneForm[item.prop] }}2{{ item.prop }}3{{ form }}
            </template> -->
          </view>
          <!-- 数据绑定不到 -->
          <!-- <forms-item :option="option" :form="deepCloneForm"></forms-item> -->
        </uni-forms>
        <button type="primary" @click="submit('valiForm')">提交</button>
      </view>
    </uni-section>
  </view>
</template>

<script>
// 小程序组件层级绑定与校验出问题
import formsItem from "./formsItem.vue";
import { deepClone } from "./utils/deepClone.js";
import getTypePropDefault from "./utils/typePropDefault";
import handleAvueOption from "./utils/handleAvueOption";
// import componentObj from "./auniComponents/importIndex.js";
export default {
  name: "a-uni-indexTest",
  components: {
    // ...componentObj,
    formsItem,
  },
  // 小程序不支持props，在小程序中无法通过props给子组件传递值。
  // 不能在子组件方法中直接对duration进行修改，需要使用this.$emit('substractDuration')，通知父组件，在父组件中进行修改。
  props: {
    form: {
      type: Object,
      default: () => {},
    },
    option: {
      type: Object,
      default: () => {},
    },
    detail: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // form: {
      //   a166126914632983938: "2222",
      // },
      deepCloneForm: deepClone(this.form),
      // 深拷贝配置
      // 可以在父元素处理好再传到Aform组件这里
      deepOption: null,
      dynamicRules: {
        a166126914632983938: {
          rules: [
            {
              required: true,
              errorMessage: "必填项不能为空",
            },
          ],
        },
      },
    };
  },
  watch: {
    deepCloneForm: {
      deep: true,
      immediate: true,
      handler(newV) {
        console.log('deepClone0000 form1111 :>> ', newV);
        // 触发value绑定值的交互与更新
        this.$emit("input", newV);
      },
    },
    // value: {
    //   deep: true,
    //   immediate: true,
    //   handler(newV) {
    //     console.log('input watch :>> ', newV);
    //     // 触发value绑定值的交互与更新
    //     this.$emit("input", newV);
    //   },
    // },
  },
  computed: {},
  onLoad() {},
  created() {
    // // 初始化循环配置生成form绑定默认值
    // if (JSON.stringify(this.form) == "{}") {
    //   this.creatFormProp();
    // }
    this.useHandleAvueOptionJS();
  },
  onReady() {
    // 需要在onReady中设置规则
    this.$refs.valiForm.setRules(this.dynamicRules);
  },
  methods: {
    change(e, prop) {
      console.log("e111", e);
      console.log("prop", prop);
    },
    /**
     * @description: 循环配置生成form绑定默认值
     * @return {*}
     */
    creatFormProp() {
      //console.log("1111 :>> ", 1111);
      let deepOption = deepClone(this.option);
      // 处理普通表单的column
      if (deepOption.column && deepOption.column.length > 0) {
        deepOption.column.forEach((item) => {
          // this.form[item.prop] = getTypePropDefault(item.type);
          // 深度式响应
          // crud内嵌子表单
          // if (item.type == "customCrud") {
          //   // 子表单部分相关配置在子表单组件内适配
          //   let children = deepClone(item.params.formOption);
          //   this.$set(this.form, item.prop, getTypePropDefault(item.type, children));
          // } else {
          //   this.$set(this.form, item.prop, getTypePropDefault(item.type));
          // }
          this.$set(this.form, item.prop, getTypePropDefault(item.type));
        });
      }
      // 处理分组group
      if (deepOption.group && deepOption.group.length > 0) {
        deepOption.group.forEach((item) => {
          item.column.forEach((item2) => {
            // this.form[item2.prop] = getTypePropDefault(item2.type);
            // 深度式响应
            this.$set(this.form, item2.prop, getTypePropDefault(item2.type));
          });
        });
      }
      this.$forceUpdate();
      console.log("this.form000000 :>> ", this.form);
    },

    /**
     * @description: 抽成js调用处理配置数据返回,handleAvueOption.js
     * @return {*}
     */
    useHandleAvueOptionJS() {
      let deepOption = deepClone(this.option);
      console.log("deepOption :>> ", deepOption);
      // this需传递
      let data = handleAvueOption(deepOption, this.detail, this);
      console.log("data", data);
      this.deepOption = data;
      this.$forceUpdate();
    },

    /**
     * @description: 点击提交 uni-forms 数据返回
     * @param {*} ref
     * @return {*}
     */
    submit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          // uni.showToast({
          //   title: `校验通过`,
          // });
          console.log("uni-forms-onSubmit-res", res);
          console.log("this.form", this.form);
          // 合并数据，解决单组件数据绑定问题
          let allFinalData = Object.assign(res, this.form);
          console.log("allFinalData", allFinalData);
          // 触发父组件自定义事件
          this.$emit("auniFormMethods", allFinalData);
        })
        .catch((err) => {
          console.log("err", err);
          uni.showToast({
            title: `校验不通过，请检查表单`,
            icon: "error",
            duration: 2000,
          });
        });
    },
  },
};
</script>

<style lang="scss">
.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}
</style>
